<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="utf-8"/>
	    <title>Settings - Add Category</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	    <meta name="description" content=""/>
	    <meta name="author" content=""/>
		
		<!-- fav icon -->
	    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>
	    
    	<!-- styles -->
	    <link href="/css/admin_common.css" rel="stylesheet"/>
	    <link href="/css/admin_home.css" rel="stylesheet"/>
	</head>
	
	<body>
		<div id="container" class="container">
			<header>
				<tal:block metal:use-macro="macro.tpl.php/header"></tal:block>
			</header>
			
			<div class="row">
				<div class="span385 column" id="span385">
					<tal:block metal:use-macro="macro.tpl.php/sideNav"></tal:block>
				</div><!-- /.span385 -->
				
				<div class="spanF725 column">
					<div class="rightPanel">
						<div class="tabsBg">
						    <a class="stretchBtn" id="strechMe" href="javascript:void(0);"><i class="toggleIcon"></i></a>
							<div class="tabs">
								<a rel="view-story" href="">All Categories</a>
								<a rel="story-timeline" class="active" href="">Add Category</a>
							</div><!-- /.tabs -->
						</div><!-- /.tabsBg -->
						<div id="rightElements">
							<div class="form">
								<div class="rightElements">
									<div class="title clearfix">
										<div class="fleft">
											<h2 class="fleft">Add Category</h2>
										</div>
									</div>
									<div class="align-center" tal:condition="message">
										<br /><div class="${messageClass}" tal:content="message"></div><br />
									</div>
									<form method="post" id="addDetails">
										<div class="row singleFieldContainer">
											<div class="column"><label class="fieldName required" for="videoName">Category Name</label></div>
											<div class="column"><input type="text" name="categoryName" class="required" id="videoName"/></div>
										</div>
										<div class="row singleFieldContainer">
											<div class="column valign-top"><label class="fieldName required" for="shortDescription">Description</label></div>
											<div class="column"><textarea name="shortDescription" rows="6" class="required" id="shortDescription"></textarea></div>
										</div>
										<div class="row singleFieldContainer">
											<div class="column">&nbsp;</div>
											<div class="column">
												<input type="submit" class="btn-submit" name="addCategory" value="Add Category"/>
												<a class="cancel" href="javascript:void(0);">Cancel</a>
											</div>
										</div>
									</form>
								</div><!-- /.rightElements -->
							</div>
						</div><!-- /rightElements // to be filled by ajax -->
					</div><!-- /.rightPanel -->
				</div><!-- /.spanF725 -->
			</div><!-- /.row -->
			
			<footer>
				
			</footer>
		</div><!-- /.container -->
		
		<script type="text/javascript" src="/js/jquery-ui-1.9.1.js"></script>
		<script type="text/javascript" src="/js/jquery.datetimepicker.js"></script>
		<script type="text/javascript" src="/js/jquery_validate.js"></script>
		<script type="text/javascript" src="/js/common.js"></script>
		
	</body>
</html>
